<template>
	<view class="">

		<u-sticky offset-top="0">
			<view class="tabs">
				<u-tabs :list="list1" lineColor="#FC3F39" :activeStyle="{
				    color: '#303133',
				    fontWeight: 'bold',
				    transform: 'scale(1.25)'
				}" :scrollable="false"></u-tabs>
			</view>
		</u-sticky>
		<view class="p-30">
			<view class="item card" :class="{'mt-30' : index != 0}" v-for="(item,index) in 10">
				<view class="p-30 flex-row align-center justify-between">
					<view class="flex-row align-center">
						<view class="avatar flex-row align-center justify-center">
							王
						</view>
						<view class="ml-30">
							<view class="flex-row align-center">
								<view>
									王小宝
								</view>
								<view class="small-size gray-color ml-10">
									15251292108
								</view>
							</view>
							<view class="small-size gray-color mt-10">
								江苏省连云港市连云区格林春天
							</view>
						</view>
					</view>
					<navigator url="/pages/mine/address/edit" class="">
						<u-icon name="edit-pen" size="24"></u-icon>
					</navigator>
				</view>
				<u-line></u-line>
				<view class="p-30 flex-row justify-end">
					<view class="">
						<u-button shape="circle" type="error" size="small" text="删除" color="#FC3F39"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list1: [{
					name: '国内',
				}, {
					name: '海外'
				}]
			};
		}
	}
</script>

<style>
	.tabs {
		background-color: #fff;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #FC3F39;
		color: #fff;
	}
</style>